<template>
  <!-- 资料列表 -->
  <div class="doc" v-show="selectedTabId == 1">
    <ul class="listTitle">
      <!-- <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      ></el-checkbox> -->
      <li>序号</li>
      <!-- <li>来源</li> -->
      <li>类型</li>
      <li>页数</li>
      <li>文件名称</li>
      <li>大小</li>
      <li>上传时间</li>
      <!-- <li>标签</li> -->
      <li>下载量</li>
      <li>上传人</li>
      <!-- <li>审核状态</li> -->
      <li>操作</li>
    </ul>
    <div class="list">
      <!-- 数据未加载出来时显示 -->
      <!-- <p class="nodata" v-if="dataInfoList.length == 0">当前条件下无数据。</p> -->
      <ul v-for="(item, index) in dataInfoList" :key="index">
        <!-- <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox :label="item">{{ item }}</el-checkbox>
        </el-checkbox-group> -->
        <li>{{ index + 1 }}</li>
        <!-- <li>{{ item.source }}</li> -->
        <li>
          {{ item.fileType }}
        </li>
        <li>{{ item.pageNumber }}</li>
        <li :title="item.fileName">{{ item.fileName }}</li>
        <li>{{ $byteConvert(item.fileSize) }}</li>
        <li>{{ item.createDate.slice(0, 10) }}</li>
        <!-- <li style="background: 'red'">
          {{ item.categoryTypeList[0].fileName }}

          <tagsGroup
            :showTagsArr="[item.categoryTypeList.map((key) => key.id)[0]]"
          ></tagsGroup>
          <tagsGroup
            :showTagsArr="[item.categoryTypeList.map((key) => key.id)[0]]"
          ></tagsGroup>
        </li> -->
        <li>{{ item.downloads }}</li>
        <li>{{ item.operator }}</li>
        <!-- <li>
          <span :class="getExamineClass(item.isExamine)">{{
            getExamineType(item.isExamine)
          }}</span>
        </li> -->
        <li>
          <div class="handle-btn" @click="compile(item)">
            <img src="../../assets/common/edit.png" alt="" />
            <span>编辑</span>
          </div>
          <div class="handle-btn" @click="goDetail(item)">
            <img src="../../assets/common/view.png" alt="" />
            <span>详情</span>
          </div>
          <div class="handle-btn" @click="del(item.id)">
            <img src="../../assets/common/del.png" alt="" />
            <span>删除</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 编辑模态框 -->
    <editAddInfoDialog
      ref="editinfoDialog"
      :title="title"
      :formLabelAlign="obj"
      :checkedId="realChecked"
      :item="item"
      @setObj="setObj"
      @setCheckedId="setRealChecked"
      @editDataInfo="editDataInfo"
      @reGetData="reGetData"
    ></editAddInfoDialog>
    <!-- 分页 -->
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page.sync="current"
      :page-size="9"
      layout="prev, pager, next, jumper"
      :total="this.dataInfoList.length"
      style="text-align: right; margin: 0.2rem 0.6rem 0.2rem 0"
    >
    </el-pagination> -->
  </div>
</template>

<script>
//import tagsGroup from "../common/tagsGroup";
import { mapState } from "vuex";
import editAddInfoDialog from "../common/editAddInfoDialog";
export default {
  components: {
    //tagsGroup,
    editAddInfoDialog,
  },
  props: {
    selectedTabId: {
      default: () => 1, //zc视频zc图册  资料切换
    },
    dataInfoList: {
      default: () => [], //资料全部数组
    },
    // list: {
    //   default: () => [], //资料分页数组
    // },
  },
  data() {
    return {
      checkAll: false,
      title: "新增",
      checkedCities: [],
      checked: [],
      isIndeterminate: false,
      tagList: [
        {
          id: 1,
          categoryName: "标签",
        },
      ],
      // current: 1,
      tagsList: [],
      obj: {
        fileName: "",
        memo: "",
        id: "",
        keywords: "", //主题词
        fileList: [],
      },
      realChecked: [],
      fileList: [],
      item: "",
      pageSize: 12,
      // loading: false,
    };
  },
  // updated() {},
  computed: {
    ...mapState({
      targetTreeChecked(state) {
        return state.app.targetTreeChecked;
      },
      baseURL() {
        if (this.selectedTabId == 2) {
          return `${window.VUE_APP_BASE_URL}/imageData/uploadImageFile`;
        } else if (this.selectedTabId == 3) {
          return `${window.VUE_APP_BASE_URL}/imageData/uploadVideoFile`;
        }
        return "";
      },
    }),
  },
  methods: {
    setRealChecked(data) {
      console.log(data);
      this.realChecked = data;
    },
    setObj(value) {
      this.obj = value;
    },
    getExamineType(type) {
      if (type == 1) {
        return "未审核";
      } else if (type == 2) {
        return "审核通过";
      } else if (type == 3) {
        return "废弃";
      } else if (type == 4) {
        return "存疑";
      }
    },
    getExamineClass(type) {
      if (type == 1) {
        return "examine1";
      } else if (type == 2) {
        return "examine2";
      } else if (type == 3) {
        return "examine3";
      } else if (type == 4) {
        return "examine4";
      }
    },
    reGetData() {
      this.$emit("reGetData");
    },
    goDetail(item) {
      this.$router.push({
        name: "docDetail",
        params: {
          item: item,
        },
      });
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.dataInfoList : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.dataInfoList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.dataInfoList.length;
    },
    allSelected() {
      if (this.checkedCities.length === this.dataInfoList.length) {
        this.checkedCities = [];
        this.checkAll = false;
        this.isIndeterminate = false;
      } else {
        this.checkedCities = this.dataInfoList;
        this.checkAll = true;
        this.isIndeterminate = false;
      }
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api
            .deleteImage({
              ids: [id],
              type: "data",
            })
            .then(() => {
              this.$emit("reGetData");
              this.$message({
                type: "success",
                message: "删除成功!",
                showClose: true,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            showClose: true,
          });
        });
    },
    editDataInfo(dataList) {
      this.dataInfoList = dataList;
    },

    // 编辑
    compile(item) {
      this.title = "编辑";
      this.$refs.editinfoDialog.openDialog();
      console.log(123666, item);
      this.obj.fileName = item.fileName;
      this.obj.keywords = item.themeWord;
      this.$store.commit("app/setDialogTitle", "编辑");
      this.obj.memo = item.memo;
      this.obj.id = item.id;
      let arr = [];
      for (let i = 0; i < item.categoryTypeList.length; i++) {
        arr.push(item.categoryTypeList[i].id);
      }
      this.realChecked = arr;
      this.fileList = [{ name: "", response: item.fileUrl }];
      this.fileList[0].name = item.uploadFileName;
      this.fileList[0].response = item.fileUrl;
      this.item = item;
      this.obj.fileList = this.fileList;
    },
  },
};
</script>

<style lang="scss" scoped>
.doc {
  @import "~@/styles/mixin.scss";
  width: 100%;
  margin-bottom: 0.3rem;
  // height: calc(100vh - 2rem);
  color: #ffffff;
  ::v-deep.el-dialog__body,
  ::v-deep.el-dialog__footer {
    background: #474747;
    color: #ffffff;
  }
  ::v-deep.el-dialog__header {
    background: #3e3d3d;
    & span {
      color: #ffffff;
    }
  }
  ::v-deep.el-form-item__label {
    color: #ffffff;
  }
  ::v-deep.el-input__inner {
    background: #383838;
    border-radius: 5px;
    color: #ffffff;
    border: none;
  }
  .listTitle {
    height: 0.54rem;
    line-height: 0.54rem;
    display: flex;
    background: #034576;
    font-size: 0.16rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #cccccc;
    /* li {
      width: 0.96rem;
      text-align: center;
    }
    ::v-deep.el-checkbox__inner {
      margin: 0 0.21rem 0 0.24rem;
    }
    li:nth-of-type(2) {
      width: 2.2rem;
      margin-left: 0.24rem;
    }
    li:nth-of-type(4) {
      margin: 0 0.1rem 0 0.2rem;
    }
    li:nth-of-type(5) {
      width: 1.44rem;
    }
    li:nth-of-type(6) {
      margin: 0 0.06rem;
    }
    li:nth-of-type(7) {
      width: 1.1rem;
    }
    li:nth-of-type(8) {
      width: 1.2rem;
      padding: 0 0.16rem;
      margin: 0 0 0 0.12rem;
    }
    ::v-deep.group .tag {
      margin: auto;
    }
    li:nth-of-type(11) {
      box-sizing: border-box;
      margin-right: 0.06rem;
    }
    li:nth-of-type(12) {
      width: 2.26rem;
      margin-left: 0.14rem;
    }
    li:nth-of-type(1) {
      width: 0.4rem;
    } */
  }
}
.doc {
  ::v-deep.el-loading-spinner {
    margin-top: 2rem;
  }
  ::v-deep.el-checkbox__label {
    display: none;
  }
  .nodata {
    width: 100%;
    color: #fff;
    margin-top: 1rem;
    text-align: center;
  }
  ul {
    height: 0.54rem;
    line-height: 0.54rem;
    display: flex;
    font-size: 0.14rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
    li {
      width: 0.96rem;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .handle-btn {
        cursor: pointer;
      }
    }
    ::v-deep.el-checkbox__inner {
      margin: 0 0.21rem 0 0.24rem;
    }
    li:nth-of-type(2) {
      width: 1.4rem;
      // margin-left: 0.24rem;
    }
    li:nth-of-type(3) {
      margin: 0 0.1rem 0 0.2rem;
    }
    li:nth-of-type(4) {
      width: 5rem;
    }
    li:nth-of-type(5) {
      margin: 0 0.06rem;
    }
    li:nth-of-type(5) {
      width: 1.8rem;
    }
    li:nth-of-type(6) {
      width: 2.2rem;
      padding: 0 0.16rem;
      margin: 0 0 0 0.12rem;
    }
    ::v-deep.group .tag {
      margin: auto;
    }
    li:nth-of-type(7) {
      width: 1.4rem;
    }
    li:nth-of-type(8) {
      width: 1.8rem;
      box-sizing: border-box;
      margin-right: 0.06rem;
    }
    li:nth-of-type(9) {
      width: 2.26rem;
      display: flex;
      justify-content: center;
      height: 0.54rem;
      line-height: 0.54rem;
      margin-left: 0.14rem;
      div {
        width: 0.7rem;
        height: 0.28rem;
        background: #1890ff;
        border-radius: 0.05rem;
        text-align: center;
        line-height: 0.28rem;
        margin-right: 0.1rem;
        margin-top: 0.13rem;
        img {
          width: 0.14rem;
          height: 0.14rem;
          margin-top: 0.07rem;
          margin-right: 0.02rem;
        }
        span {
          font-size: 0.14rem;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
        }
      }
      div:nth-of-type(3) {
        background: #e64f4f;
      }
    }
    li:nth-of-type(1) {
      width: 1rem;
    }
  }
}
.examine1 {
  color: #409eff;
}
.examine2 {
  color: #67c23a;
}
.examine3 {
  color: #f56c6c;
}
.examine4 {
  color: #e6a23c;
}
</style>